<template>
  <div class="contact">
      <h1><span>深入私募内部实地调研</span><span>留下联系方式，获取第一手资料</span></h1>
      <div class="contact1">
          <span>姓名：</span><input type="text" v-model="name" placeholder="请输入您的姓名">
          <span class="tel">电话：</span><input type="text" v-model="phone" placeholder="请输入您的手机号">
         <div class="submit" @click="subcontactus">立即提交</div>
      </div>
  </div>
</template>
<script>
import api from '../static/js/api.js';
export default {
      data() {
        return {
          name:"",
          phone:""
        }
      },
      methods:{
          subcontactus(){
            if(this.name == ""){
                this.$alert("请填写您的姓名！");
                return;
            }else if(!/^1\d{10}$/.test(this.phone)){
                this.$alert("请正确填写您手机号！");    
                return;                
            }else{
                  api.contactUs({phone:this.phone,name:this.name}).then((res)=>{
                            if(res.code == 1){
                                this.name = "";
                                this.phone = "";
                                
                             this.$alert(res.msg)
                            }else{
                              this.$alert(res.msg)
                            }
              })
          }
      }
  }
}
</script>

<style scoped>
.contact1{
    margin-top: 14px;
    text-align: center;
}
.contact1 span{
   font-size: 16px;
   font-weight: bolder;
}
.tel{
    margin-left: 30px;
}
.contact{
    background: white;
    height: 130px;
    width: 720px;
    margin: 20px auto;
    box-sizing: border-box;
    overflow: hidden;
    background: url("http://p6dwecco6.bkt.clouddn.com/list/contus.png") no-repeat;
    background-size: cover;
}
.contact h1{
    margin-top: 1px;
    text-align: center;
    margin-top: 20px;
    color: white;
}
.contact h1 span:nth-child(1){
    font-size: 24px;
    font-weight: bolder;
}
.contact h1 span:nth-child(2){
    font-size: 16px;
    font-weight: bolder;
    margin-left: 20px;
}
.contact{
    color: white;
}
.contact p{
    font-size: 12px;
    color: #999;
    text-align: center;
    margin: 20px auto;
}
.contact input{
    height: 34px;
    width: 160px;
    margin: 10px auto;
    display: inline-block;
    padding-left: 10px;
}
.submit{
    height: 40px;
    width: 120px;
    display: inline-block;
    text-align: center;
    line-height: 40px;
    margin-left: 30px;
    background: #b41d24;
    color: white;
    cursor: pointer;
}
</style>
